<template>
  <div :style="{ backgroundColor: colorConfig.backgroundColor, color: colorConfig.textColor }">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark header">
          <div style="height: 100%;">
            <div class="topCls">
              <!-- <el-avatar :size="50" style="margin-top: 5px;float: left;" :src="circleUrl"></el-avatar> -->
              <div class="iconCls" @click="callAndroid();">
                <img src="../assets/icon.png" height="60px" />
              </div>
              <div class="infoCls">
                <ul style="margin: 0px;padding: 0px;list-style: none;height: 70px;line-height: 70px;">
                  <li class="titleCls">清镇市人民医院</li>
                  <li class="detailCls">THEFIRSTPEOPLE'SHOSPITALOFQINGZHEN</li>
                </ul>
              </div>
              <div class="cTitleCls">
                {{ titleStr }}
              </div>
              <div class="rightDiv">
                <ul>
                  <li class="timeCls">{{ timeStr }}</li>
                  <li class="dateCls">{{ dateStr }}</li>
                </ul>
              </div>
            </div>
          </div>

        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
        <div class="grid-content bg-purple-light seamless-warp" style="margin-left: 10px;margin-right: 10px;">
          <ListItem></ListItem>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light seamless-warp" style="margin-right: 10px;">
          <WaitListItem></WaitListItem>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="footer">
          <div class='divWrap'>
            　　　　<div class='div'>
              　　　　　　请保管好个人贵重物品!
              　　　　</div>
            　　</div>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import ListItem from './ListItem.vue';
import WaitListItem from './WaitListItem.vue';

var totalH = 0;
function resize() {
  var alist = document.getElementsByClassName("seamless-warp")
  if (alist) {
    for (var idx = 0; idx < alist.length; idx++) {
      var mya = alist[idx];
      if (mya) {
        totalH = window.innerHeight - 153;
        mya.style.height = totalH + "px";
      }
    }
  }
}


function getTimer() {
  let date = new Date();
  let seconds = date.getSeconds();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds)
}

export default {
  data() {
    return {
      titleStr: "",
      colorConfig: {},
      timeStr: "",
      dateStr: "",
      tableHeight: "",
      newsList: [{
        "title": "请保管好个人贵重物品!"
      }, {
        "title": "请保管好个人贵重物品!"
      }],
      footerDetail: "请保管好个人贵重物品",
    };
  },
  computed: {
    optionLeft() {
      return {
        direction: 2,
        limitMoveNum: 2
      };
    }
  },
  methods: {
    // 收到消息处理
    getSocketData(res) {
      var data = res.detail;
      console.warn("TAG 数据:", data);
      // ...业务处理
    },
    callAndroid() {
      alert("TAG 点击");
      if (window['AndroidBrowser']) {
        AndroidBrowser.jsSpeak("请张晓涵和壠壡坜壣壤壥壦壧壨坝壪夁夐夑夒夓夔奯奰奱奲孻孼孽孾到第五诊室就诊");
      }
    }
  },
  mounted() {
    // window.addEventListener("onmessageWS", this.getSocketData);
    console.error("在虚拟DOM真正挂载完毕");
    resize();
    //DOM操作可以写在这个里面
    this.timeStr = getTimer();

    setInterval(() => {
      this.timeStr = getTimer();
    }, 50);

    const event = new Date();
    const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
    this.dateStr = event.toLocaleDateString(undefined, options);

    if (this.GLOBAL.device) {
      this.titleStr = this.GLOBAL.device.areaName;
    }
    window.onresize = function () {
      resize();
      window.dispatchEvent(new CustomEvent("ON_RESIZE"));
    }
    
    this.colorConfig = this.GLOBAL.colorConfig;
    window.addEventListener("LOGIN_SUCCESS", (res) => {
      this.colorConfig = this.GLOBAL.colorConfig;
      this.titleStr = this.GLOBAL.device.areaName;
    });

  },
  components: { ListItem, WaitListItem }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.iconCls {
  float: left;
  height: 60px;
  line-height: 60px;
  vertical-align: middle;
  padding-top: 5px;
}

.topCls {
  width: 99%;
  margin-left: 8px;
  margin-right: 10px;
  height: 60px;
  line-height: 60px;
  text-align: left;
  vertical-align: middle;
}

.infoCls {
  float: left;
  height: 60px;
  line-height: 60px;
  margin-top: 0px;
  margin-left: 10px;
  width: 30%;
}

.cTitleCls {
  width: 30%;
  font-weight: bold;
  font-size: 30px;
  float: left;
  text-align: center;
  vertical-align: middle;
  height: 60px;
  line-height: 60px;
}

.titleCls {
  font-size: 25px;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  vertical-align: bottom;
}

.detailCls {
  font-size: 9px;
  height: 10px;
  line-height: 10px
}

.rightDiv {
  float: right;
  height: 60px;
  line-height: 60px;
  width: 30%;
  text-align: right;
  padding-right: 10px;
}

.rightDiv>ul {
  width: 100%;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.timeCls {
  font-size: 30px;
  font-weight: bold;
  height: 40px;
  line-height: 40px;
}

.dateCls {
  font-size: 18px;
  height: 20px;
  line-height: 20px;
}


.seamless-warp2 {
  overflow: hidden;
  width: 100%;
  height: 40px;
  line-height: 40px;

  ul.item {
    margin: 0px;
    padding: 0px;
    width: calc(100vh - 100px);
    list-style: none;

    li {
      float: left;
      margin-right: 10px;
    }
  }
}

.el-row {
  &:last-child {
    margin-bottom: 0;
  }

  margin: 0px;
  padding: 0px;
  width: 100%;
}

.el-col {
  border-radius: 6px;
}

.grid-content {
  border-radius: 6px;
  min-height: 36px;  
}

.row-bg {
  padding: 10px 0;
  // background-color: #f9fafc;
}

.header {
  height: 60px;
  background-color: rgba(255, 255, 255, 0.2);
}

.footer {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  text-align: left;
  padding-left: 10px;
  background-color: rgba(255, 255, 255, 0.2)
}

#detailDiv {
  height: 60px;
  line-height: 60px;
  position: relative;
  width: 300px;
  left: calc(100% + 300px);
}


.divWrap {
  width: calc(100%); //(宽度)
  overflow: hidden; //（超出隐藏）
}

.div {
  display: inline-block;
  white-space: nowrap;
  animation: 10s div linear infinite normal;
}

//根据自己情况调节，
@keyframes div {

  //起始位置
  0% {
    transform: translateX(200%);
    -webkit-transform: translateX(200%);
  }

  //终点位置
  100% {
    transform: translateX(-600px);
    -webkit-transform: translateX(-600px);
  }
}

// //划过暂停
// .div:hover {
//   display: inline-block;
//   white-space: nowrap;
//   animation: 10s div linear infinite normal paused;
// }
</style>
